<template>
  <div class="page_video">
    <div style="width: 900px; margin: 10px auto">
      <Alert type="success"> {{$t('common.trainVideo')}}</Alert>
      <div>
        <video-player
          class="video-player-box"
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          customEventName="customstatechangedeventname"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @statechanged="playerStateChanged($event)"
          @ready="playerReadied"
        >
        </video-player>

        <!--        <video width="320" height="240" controls autoplay>-->
        <!--          <source src="movie.mp4" type="video/mp4">-->
        <!--        </video>-->
      </div>
      <div style="margin-top: 10px">
        <i-button
          :type="getBtnType(video.id)"
          v-for="(video, index) in videoList"
          style="margin-right: 20px"
          @click="playThis(video.id)"
        >
          <Icon type="ios-play"></Icon>
          {{$t('common.video')}}{{ index + 1
          }}<span v-if="video.id == curPlayId">{{$t('common.currentVideo')}}</span>
        </i-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/libs/util";
import { videoPlayer } from "vue-video-player";
import VideoApi from "@/api/videoApi";
import "@/assets/video/video-js.css";
// import 'video.js/dist/video-js.css'
export default {
  name: "page_video",
  components: {
    videoPlayer,
  },
  data() {
    return {
      sportsRecordId: "",
      curPlayId: "",
      videoList: [],
      playerOptions: {
        autoplay: "any",
        preload: "auto", // 自动加载
        controls: true,
        muted: true, // 是否静音
        width: 900,
        // height:200,
        language: "zh-CN", // 设置语言
        // loop: true,
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        sources: [
          // {
          //   type: "video/mp4",
          //   src: "http://localhost:9999/web/download/simpleVideo"
          // }
        ],
        // poster: "/static/images/author.jpg",
      },
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  methods: {
    onPlayerPlay(player) {
      console.log("player play!", player);
    },
    onPlayerPause(player) {
      console.log("player pause!", player);
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log("player current update state", playerCurrentState);
    },
    playerReadied(player) {
      console.log("播放器准备就绪", player);
      // 如果不是播放状态，则自动播放
      const that = this;
      setTimeout(function () {
        that.$refs.videoPlayer.player.play();
        // player.play();
      }, 1000);
    },
    onPlayerEnded(player) {
      this.$Message.info(this.$t('common.playEndMsg'));
    },
    checkVideo() {
      VideoApi.checkVideoFile(this.sportsRecordId).then(
        (res) => {
          this.$refs.videoPlayer.player.autoplay("any");
        },
        (error) => {
          this.$Message.error(this.$t('common.noVideo') );
        }
      );
    },
    queryVideoList() {
      VideoApi.getVideoList(this.sportsRecordId).then(
        (res) => {
          this.videoList = res.data.data;
          if (this.videoList.length == 0) {
            this.$Message.error(this.$t('common.noVideoSport'));
            return;
          }
          const video = this.videoList[0];
          this.curPlayId = video.id;
          if (this.videoList > 1) {
            // 多个视频的，要显示按钮，并支持切换
          } else {
            // 只有一个视频，不用搞那么麻烦
            this.playerOptions.sources = [
              {
                type: "video/mp4",
                src: "performance/web/video/play/" + video.id + "?token=" + getToken(),
              },
            ];
          }
          this.$refs.videoPlayer.player.play();
        },
        (error) => {
          this.$Message.error(this.$t('common.noVideo'));
        }
      );
    },
    getBtnType(id) {
      if (id == this.curPlayId) {
        return "warning";
      }
      return "info";
    },
    playThis(id) {
      if (this.curPlayId == id) {
        return;
      }
      this.$refs.videoPlayer.player.pause();
      this.playerOptions.sources = [
        {
          type: "video/mp4",
          src: "web/video/play/" + id + "?token=" + getToken(),
        },
      ];
      this.curPlayId = id;
      this.$refs.videoPlayer.player.play();
    },
  },
  mounted() {
    this.sportsRecordId = this.$route.query.sportsRecordId;
    this.queryVideoList();

    // 控制播放按钮
    // var btns = document.getElementsByTagName("button");
    // for (var i = 0; i < btns.length; i++) {
    //   var btn = btns[i]
    //   if (btn.className == 'vjs-big-play-button') {
    //     const width = document.body.clientWidth / 2
    //     btn.style.left = "450px"
    //     break
    //   }
    // }
  },
};
</script>
<style>
html,
body {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f5f7f9;
}
</style>
